<template>
    <el-card class="box-card">
    <el-form ref="memberForm" :model="memberForm" label-width="80px">
        <el-row>
            <el-col :span="11">
                <el-form-item label="会员年龄" prop="age">
                    <el-input v-model="memberForm.age"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="11">
                <el-form-item label="会员性别" prop="sex">
                    <el-radio v-model="memberForm.sex" :label="1">男</el-radio>
                    <el-radio v-model="memberForm.sex" :label="2">女</el-radio>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="11">
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="memberForm.email"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="11">
                <el-form-item label="手机号" prop="mobile">
                    <el-input v-model="memberForm.mobile"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="11">
                <el-form-item label="身份证号" prop="idCard">
                    <el-input v-model="memberForm.idCard"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="11">
                <el-form-item label="真实姓名" prop="realName">
                    <el-input v-model="memberForm.realName"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="11">
                <el-form-item label="昵称" prop="userName">
                    <el-input v-model="memberForm.userName"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="11">
                <el-form-item label="头像">
                    <el-upload
                            class="avatar-uploader"
                            action="http://localhost:8001/member/uploadImg"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="memberForm.humanFaceUrl!=null" :src="memberForm.humanFaceUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
        <el-button @click="dialogVisible2=false">取 消</el-button>
        <el-button type="primary" @click="updateMember">修改</el-button>
    </el-card>
</template>

<script>
    export default {
        name: "MemberUpdate",
        data(){
            return{
                memberForm:{
                    humanFaceUrl:'',
                },
                disabled:true,


            }
        },
        methods:{
            handleAvatarSuccess(res, file) {//上传完成后回调

                this.memberForm.humanFaceUrl = res.result.url;
                alert(this.memberForm.humanFaceUrl)
            },
            beforeAvatarUpload(file) {//=,=== 和 == 比较的是内容
                const isJPG = file.type === 'image/jpeg'|| file.type === 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },

            updateMember:function () {
                this.$http.post('member/updateMember?id='+this.memberForm.id+
                    '&age='+this.memberForm.age+
                    '&sex='+this.memberForm.sex+
                    '&email='+this.memberForm.email+
                    '&mobile='+this.memberForm.mobile+
                    '&idCard='+this.memberForm.idCard+
                    '&realName='+this.memberForm.realName+
                    '&userName='+this.memberForm.userName+
                    '&humanFaceUrl='+this.memberForm.humanFaceUrl).then((res)=>{
                    if (res.data.success) {
                        this.$message({
                            message: res.data.message,
                            type: 'success'
                        });
                        this.dialogVisible2=false;
                    }else {
                        this.$message({
                            message: res.data.message,
                            type: 'error'
                        });
                    }
                })
            },
            search:function () {

                let user=JSON.parse(sessionStorage.getItem("userInfo")); //=JSON.parse()字符串转json对象 ，JSON。stringify（）对象转字符串
                this.$http.get("/member/getMemberById?id="+user.id).then((res)=>{
                    this.memberForm=res.data.result.tbUserInfo
                })
            },
        },
        mounted() {

            this.search()
            //获取当前登录用户

        }
    }
</script>

<style scoped>
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 1280px;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
